<template>
    <div>
        <!--导航栏-->
        <div style="position: fixed;z-index: 10;width: 100%">
            <van-nav-bar  title="订单详情" left-text="" left-arrow @click-left="onClickLeft">
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div style="height: 50px"></div>

        <div class="detail">
            <van-row>
                <van-col span="4" offset="1"><b>{{ name }}</b></van-col>
            </van-row>
            <van-row>
                <van-card v-for="order in foods"
                          :price=order.price
                          :num=order.num
                          :title=order.name
                          :thumb=order.pic
                >
                </van-card>
            </van-row>
            <van-row>
                <van-col offset="20">实付：{{ price }}</van-col>
            </van-row>
        </div>

        <!--分割线-->
        <van-divider />
        <div style="height: 20px"></div>

        <div class="detail">
            <van-row>
                <van-col span="4" offset="1"><b>配送信息</b></van-col>
            </van-row>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">送达时间</van-col>
                <van-col span="4" >尽快送达</van-col>
            </van-row>
            <div style="height: 10px"></div>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">收获地址</van-col>
                <van-col span="4" >{{ address }}</van-col>
            </van-row>
            <div style="height: 10px"></div>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">配送方式</van-col>
                <van-col span="4" >商家配送</van-col>
            </van-row>
        </div>

        <!--分割线-->
        <van-divider />
        <div style="height: 20px"></div>

        <div class="detail">
            <van-row >
                <van-col span="4" offset="1"><b>订单信息</b></van-col>
            </van-row>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">订单号</van-col>
                <van-col span="18" offset="0">{{ orderId }}</van-col>
            </van-row>
            <div style="height: 10px"></div>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">支付方式</van-col>
                <van-col span="4" >在线支付</van-col>
            </van-row>
            <div style="height: 10px"></div>
            <van-row type="flex" justify="space-between">
                <van-col span="4" offset="1">下单时间</van-col>
                <van-col span="9">{{ time }}</van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ListItem",
        data(){
            return{
                name: '他城有家',
                time: '2020/11/1 16:56',
                address: '广州商学院 技工校区26栋401',
                orderId: 134564789746531,
                foods:[],//name,pic,price,num
            }
        },
        computed:{
            price(){
                let sum =0;
                for (let order of this.foods) {
                    sum += order.price * order.num;
                }
                return sum;
            }
        },
        methods:{
            onClickLeft(){
                this.$router.back();
            }
        },
        mounted() {
            console.log("==>OrderDetail");
            const orderId = this.$route.query.id;
            this.$axios.post('/findOrderDetail',{
                orderId
            }).then(res=>{
                // console.log(res);
                this.orderId = res.data[0].id;
                this.name = res.data[0].store_name;
                this.time = this.$moment(res.data[0].create_time).format('YYYY-MM-DD HH:mm:ss');
                this.address = res.data[0].address;

                let foods = []
                for (let f of res.data) {
                    foods.push({
                        name: f.good_name,
                        pic: f.good_pic,
                        price: f.good_price,
                        num: f.num
                    })
                }
                this.foods = foods;
            })

        }
    }
</script>

<style scoped>
    .detail{
        /*border: 1px red solid;*/
        margin: 2px;
        padding: 2px;
        text-align: left;
    }
</style>